<script lang="ts">
	import { getValue } from '$utils/get';

	const icons = {
		total_orders: 'arrow_upward',
		total_order_amount: 'arrow_upward',
		total_paid_amount: 'arrow_upward',
		total_order_quantity: 'arrow_upward'
	};

	const nameMap = {
		total_orders: 'orders',
		total_order_amount: 'order amount',
		total_paid_amount: 'paid amount',
		total_order_quantity: 'order quantity'
	};

	const list = ['total_orders', 'total_order_amount', 'total_paid_amount', 'total_order_quantity'];

	export let state: IObject;
</script>

<div class="w-1320px max-w-100% min-w-350px grid grid-cols-4 gap-2">
	{#each list as item, index}
		<div class="bg-white rounded-lg shadow-lg p-4 flex flex-col justify-between">
			<div class="flex flex-col">
				<div class="text-gray-500 text-sm">{nameMap[item]}</div>
				<div class="h-36px flex flex-row items-center gap-5px">
					<i class="material-icons color-red">{icons[item]}</i>
					<span class="text-2xl font-bold">{getValue(state, item, '0')}</span>
				</div>
			</div>
			<div class="text-gray-500 text-sm">Last 30 days</div>
		</div>
	{/each}
</div>
